<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科" prop="subjectID">
          <el-select
            v-model="ruleForm.subjectID"
            @change="getdirectorySimple"
            placeholder="请选择"
            style="width:400px"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item,index) in getSubjectSimpleList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="catalogID">
          <el-select v-model="ruleForm.catalogID" placeholder="请选择" style="width:400px">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item,index) in directorySimple"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterpriseID">
          <el-select v-model="ruleForm.enterpriseID" placeholder="请选择" style="width:400px">
            <el-option
              :label="item.company"
              :value="item.id"
              v-for="(item,index) in getcompanys"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" required>
          <el-select
            v-model="ruleForm.province"
            placeholder="请选择"
            @change="getCity"
            style="width:195px"
            prop="province"
          >
            <el-option :label="item" :value="item" v-for="(item, index) in province" :key="index"></el-option>
          </el-select>
          <el-select
            v-model="ruleForm.city"
            placeholder="请选择"
            style="width:195px;margin-left:10px"
            prop="city"
          >
            <el-option :label="item" :value="item" v-for="(item, index) in city" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="ruleForm.direction" placeholder="请选择" style="width:400px">
            <el-option :label="item" :value="item" v-for="(item,index) in directions" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="questionType">
          <el-radio-group v-model="ruleForm.questionType">
            <el-radio label="1" value="1">单选</el-radio>
            <el-radio label="2" value="2">多选</el-radio>
            <el-radio label="3" value="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="ruleForm.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干" prop="question">
          <quillEditor style="height:170px;margin-bottom:80px" v-model="ruleForm.question"></quillEditor>
        </el-form-item>
        <el-form-item label="选项" v-if="ruleForm.questionType=='1'">
          <div class="radioUpload" v-for="(item,index) in options" :key="index">
            <el-radio-group v-model="code[0]" style="display:inline-block;">
              <el-radio :label="item.code" style="display:block;">{{item.code}}：</el-radio>
              <!-- <el-radio label="B" style="display:block;margin-bottom:30px">
              B：
              <el-input v-model="input2" placeholder></el-input>
              <div class="upload">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <span class="src">上传图片</span>
                  <i class="el-icon-circle-close close"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
              </div>
            </el-radio>
            <el-radio label="C" style="display:block;margin-bottom:30px">
              C：
              <el-input v-model="input3" placeholder></el-input>
              <div class="upload">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <span class="src">上传图片</span>
                  <i class="el-icon-circle-close close"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
              </div>
            </el-radio>
            <el-radio label="D" style="display:block;margin-bottom:30px;width:260px">
              D：
              <el-input v-model="input4" placeholder></el-input>
              <div class="upload">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <span class="src">上传图片</span>
                  <i class="el-icon-circle-close close"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
              </div>
              </el-radio>-->
            </el-radio-group>
            <el-input v-model="item.title" placeholder style="width:270px;"></el-input>
            <div class="upload">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <span class="src">上传图片</span>
                <i class="el-icon-circle-close close"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="item.img" alt />
              </el-dialog>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="选项" v-else-if="ruleForm.questionType=='2'">
          <div class="radioUpload" v-for="(item,index) in options" :key="index">
            <el-checkbox-group v-model="code" style="display:inline-block;">
              <el-checkbox :label="item.code" value="A" style="display:block;">{{item.code}}：</el-checkbox>
              <!-- <el-checkbox label="B" value="B" style="display:block;margin-bottom:30px">
              B：
              <el-input v-model="input2" placeholder></el-input>
              <div class="upload">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <span class="src">上传图片</span>
                  <i class="el-icon-circle-close close"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
              </div>
            </el-checkbox>
            <el-checkbox label="C" value="C" style="display:block;margin-bottom:30px">
              C：
              <el-input v-model="input3" placeholder></el-input>
              <div class="upload">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <span class="src">上传图片</span>
                  <i class="el-icon-circle-close close"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
              </div>
            </el-checkbox>
            <el-checkbox label="D" value="D" style="display:block;margin-bottom:30px;width:260px">
              D：
              <el-input v-model="input4" placeholder></el-input>
              <div class="upload">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <span class="src">上传图片</span>
                  <i class="el-icon-circle-close close"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
              </div>
              </el-checkbox>-->
            </el-checkbox-group>
            <el-input v-model="item.title" placeholder style="width:270px;"></el-input>
            <div class="upload">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <span class="src">上传图片</span>
                <i class="el-icon-circle-close close"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="item.img" alt />
              </el-dialog>
            </div>
          </div>
        </el-form-item>
        <el-form-item v-else></el-form-item>
        <el-form-item label prop="desc" v-if="ruleForm.questionType!='3'">
          <el-button
            type="danger"
            icon="el-icon-plus"
            :disabled="ruleForm.questionType=='1'?true:false"
            @click="addOption"
          >增加选项与答案</el-button>
        </el-form-item>
        <el-form-item label="解析视频">
          <el-input v-model="ruleForm.videoURL" style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="答案解析" prop="answer">
          <quillEditor style="height:170px;margin-bottom:80px" v-model="ruleForm.answer"></quillEditor>
        </el-form-item>
        <el-form-item label="题目备注">
          <textarea v-model="ruleForm.remarks" name id cols="50" rows="5"></textarea>
        </el-form-item>
        <el-form-item label="试题标签">
          <el-select
            v-model="ruleForm.tags"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择试题标签"
            style="width:400px"
          >
            <el-option
              v-for="item in tagsSimple"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button :type="id?'success':'primary'" @click="submitForm('ruleForm')">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
//导入富文本相关文件
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { provinces, citys } from "@/api/hmmm/citys.js";
import { simple, list as subjectlist } from "@/api/hmmm/subjects.js";
import { simple as directorySimple } from "@/api/hmmm/directorys.js";
import { simple as tagsSimple } from "@/api/hmmm/tags.js";
import { list as companysList } from "@/api/hmmm/companys.js";
import { add, detail, update } from "@/api/hmmm/questions.js";
export default {
  data() {
    return {
      ruleForm: {
        id: "",
        province: "",
        city: "",
        subjectID: "",
        catalogID: "",
        direction: "",
        questionType: "1",
        difficulty: "1",
        answer: "",
        remarks: "",
        tags: [],
        enterpriseID: "",
        videoURL: "",
        options: [
          { isRight: false, code: "A", title: "", img: "" },
          { isRight: false, code: "B", title: "", img: "" },
          { isRight: false, code: "C", title: "", img: "" },
          { isRight: false, code: "D", title: "", img: "" },
        ],
        question: "",
        isPerfect: "",
      },
      rules: {
        subjectID: [
          { required: true, message: "请选择学科", trigger: "change" },
        ],
        catalogID: [
          { required: true, message: "请选择目录", trigger: "change" },
        ],
        enterpriseID: [
          { required: true, message: "请选择企业", trigger: "change" },
        ],
        province: [
          { required: true, message: "请选择省份", trigger: "change" },
        ],
        city: [{ required: true, message: "请选择城市", trigger: "change" }],
        direction: [
          { required: true, message: "请选择方向", trigger: "change" },
        ],
        questionType: [
          { required: true, message: "请选择题型", trigger: "change" },
        ],
        difficulty: [
          { required: true, message: "请选择难易程度", trigger: "change" },
        ],
        answer: [
          { required: true, message: "请填写答案解析", trigger: "blur" },
        ],
        question: [{ required: true, message: "请填写题干", trigger: "blur" }],
      },
      dialogImageUrl: "",
      dialogVisible: false,
      directorySimple: null || [], // 目录简单列表
      getSubjectSimpleList: [], // 学科简单列表
      tagsSimple: [], // 标签简单目录列表
      getcompanys: [], // 企业管理列表数据
      province: [],
      city: [],
      subjectName: "",
      directoryName: "",
      directions: [
        "o2o",
        "外包服务",
        "企业服务",
        "互联网金融",
        "企业咨询",
        "互联网",
        "电子商务",
        "其他",
      ],
      options: [
        { isRight: false, code: "A", title: "", img: "" },
        { isRight: false, code: "B", title: "", img: "" },
        { isRight: false, code: "C", title: "", img: "" },
        { isRight: false, code: "D", title: "", img: "" },
      ],
      code: [],
      id: this.$route.query.id,
    };
  },
  created() {
    this.getProvinces();
    this.getSubjectSimple();
    this.getcompanysList();
    if (this.id) {
      this.getdetail();
    }
  },
  methods: {
    // 获取学科简单列表
    async getSubjectSimple() {
      const { data } = await simple();
      this.getSubjectSimpleList = data;
    },
    // 获取目录简单列表
    async getdirectorySimple() {
      const { data } = await directorySimple({
        subjectID: this.ruleForm.subjectID,
      });
      this.directorySimple = data;
      // 获取标签简单目录列表
      const { data: res } = await tagsSimple({
        subjectID: this.ruleForm.subjectID,
      });
      // console.log(res, 12345);
      this.tagsSimple = res;
    },
    // 获取企业名称
    async getcompanysList() {
      const { data } = await companysList();
      console.log(data, 123);
      this.getcompanys = data.items;
    },
    // 获取城市列表数据
    getProvinces() {
      const data = provinces();
      this.province = data;
    },
    getCity() {
      const data = citys(this.ruleForm.province);
      // console.log(data, 1234);
      this.city = data;
    },
    // 增加选项与答案
    addOption() {
      this.options.push({
        isRight: false,
        code: String.fromCharCode(65 + this.options.length),
        title: "",
        img: "",
      });
    },
    // 获取试题详情
    async getdetail() {
      const { data } = await detail({ id: this.id });
      data.options = data.options.reverse();
      console.log(data, "视频预览");
      this.ruleForm = data;
      // var tags = +data.tags;
      this.ruleForm.tags = data.tags.split(",");
      var tags = [];
      this.ruleForm.tags.forEach((item) => {
        item = +item;
        tags.push(item);
      });
      this.ruleForm.tags = tags;
      console.log(tags);
      console.log(this.ruleForm.tags, "000");
      // this.ruleForm.subjectID = data.subjectName;
      // this.ruleForm.catalogID = data.directoryName;
      data.options.forEach((item) => {
        if (item.isRight == 1) {
          this.code.push(item.code);
        }
      });
    },
    // 表单提交事件  增加基础题库
    submitForm(formName) {
      this.ruleForm.tags = this.ruleForm.tags.join();
      console.log(this.ruleForm.tags, "tags");
      this.ruleForm.options.forEach((item) => {
        if (this.code.length <= 1) {
          if (this.code && item.code == this.code[0]) {
            item.isRight = true;
          }
        } else {
          this.code.forEach((item2) => {
            if (item.code == item2) {
              item.isRight = true;
            }
          });
        }
      });
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (!this.id) {
            const { data } = await add(this.ruleForm);
            console.log(data, "6666");
            this.$message({
              message: "添加数据成功",
              type: "success",
            });
            this.$router.push("/questions/list");
          } else {
            this.ruleForm.id = this.id;
            console.log(this.ruleForm, "999");
            const { data } = await update(this.ruleForm);
            this.$message({
              message: "编辑数据成功",
              type: "success",
            });
            this.$router.push("/questions/list");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 图片上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  components: {
    quillEditor,
  },
};
</script>

<style scoped lang='scss'>
.container {
  padding: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  width: 100%;
}
.el-radio {
  position: relative;
}
.radioUpload {
  position: relative;
  margin-bottom: 20px;
  .upload {
    position: absolute;
    right: 830px;
    top: -5px;
    ::v-deep .el-upload--picture-card {
      position: absolute;
      display: inline-block;
      width: 80px;
      height: 50px;
      .src {
        position: absolute;
        top: -45px;
        left: 10px;
      }
      .close {
        position: absolute;
        top: -10px;
        right: -10px;
        font-size: 20px;
      }
    }
  }
}
.el-checkbox {
  position: relative;
}
.el-upload-list__item {
  position: absolute;
  right: 20px;
}
</style>
